<template>
  <div class="msg-center">
    <m-header title="消息中心"></m-header>
    <tab class="custom-tabnav" custom-bar-width="1rem">
      <tab-item
        v-for="(item, index) in tabList"
        :key="index"
        :selected="tabIndex===index"
        @on-item-click="handleTabClick"
      >{{item}}</tab-item>
    </tab>
    <div class="body-container">
      <scroller :on-refresh="refresh" :on-infinite="infinite" v-if="!isInit">
        <div class="integral-model" v-if="msgList.length">
          <div
            style="background:white;"
            :key="index"
            v-for="(item, index) in msgList"
            @click="viewDetail(item.member_message_id)"
            :class="{'loaded-data': msgList.length < 5, 'loadmore-data': msgList.length < 10, 'msg-item': true}"
          >
            <div class="title-row">
              <div class="title">{{item.title}}</div>
              <div class="create_time">{{item.create_time}}</div>
            </div>
            <div class="content">{{item.content}}</div>
          </div>
        </div>
      </scroller>
      <div class="no-datas" v-if="!loading && !msgList.length">
        <img src="../../../assets/imgs/icon-noattention@2x.png" alt>
        <div class="desc">暂无充值记录</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  data () {
    return {
      tabIndex: 0,
      tabList: ['系统消息', '我的消息'],
      msgList: [],
      isInit: false, // 重置滚动
      pageNum: 1,
      isPull: false, // 下拉
      loading: true
    };
  },
  methods: {
    ...mapActions({
      getUnreadMessageList: 'mine/getUnreadMessageList'
    }),
    handleTabClick (index) {
      this.tabIndex = index;
      this.msgList = [];
      this.isInit = true;
      this.refresh();
    },
    viewDetail (member_message_id) {
      this.$router.push({
        name: 'MessageDetail',
        params: { member_message_id }
      });
    },
    refresh (done) {
      // 下拉
      this.isPull = true;
      this.pageNum = 1;
      this.loading = true;
      this.getDatas(done);
    },
    infinite (done) {
      // 上滑
      if (!this.isPull) {
        this.loading = true;
        this.getDatas(done);
      }
    },
    getDatas (done) {
      if (this.loading) {
        this.getUnreadMessageList({
          page: this.pageNum
        }).then(res => {
          this.loading = false;
          let listData = res.items || [];
          if (this.isInit) {
            this.isInit = false;
          }
          if (listData.length) {
            if (this.isPull) {
              this.isPull = false;
              this.msgList = [];
            }
            this.pageNum += 1;
            const listDatas = this.msgList;
            this.msgList = listDatas.concat(listData);

            if (!res.isEnd) {
              done && done(true);
            } else {
              done && done(2);
            }
          } else {
            done && done(2);
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.msg-center {
  background: #f7f7f7;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  .custom-tabnav {
    position: fixed;
    top: 0.92rem;
    width: 100%;
    z-index: 10;
  }
  .body-container {
    // margin-top: 0.92rem;
    position: fixed;
    top: 1.92rem;
    width: 100%;
    bottom: 0;
    .integral-model {
      position: relative;
      background: white;
      .msg-item {
        padding: 0.2rem 0.2rem 0.2rem 0.3rem;
        border-bottom: 1px solid #d2d2d2;

        .title-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .title {
            font-size: 0.3rem;
            color: #1c1c1c;
            margin-bottom: 0.2rem;
          }
          .create_time {
            font-size: 0.2rem;
            color: #c3c0c0;
          }
        }
        .content {
          font-size: 0.22rem;
          color: #bdbdbd;
        }
      }
    }
    .no-datas {
      position: fixed;
      width: 100%;
      top: 1.92rem;
      bottom: 0;
      height: 100%;
      text-align: center;
      background: #ffffff;
      img {
        display: block;
        width: 4.15rem;
        height: 3.22rem;
        margin: 0 auto;
        padding-top: 0.8rem;
      }
      .desc {
        margin-top: 0.3rem;
        font-size: 0.22rem;
        color: #919191;
      }
    }
  }
}
</style>
